<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Slider 滑动输入条</title>
	<link rel="stylesheet" href="../static/css/reset.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/antd.min.js"></script>
	<script src="../static/js/icons_antd.js"></script>
</head>
<style>
.ant-space-item{
	margin-left: 20px;
}
.icon-slider-icon{
	margin-left: 20px;
	width: 800px;
	display: flex;
	align-items: center;
}
.my-slider{
	width: 600px;
}
.ant-icon{
	width: 1.4em;
	height: 1.4em;
	margin: 0 20px;
}
#demo8{
	margin-left: 30px;
	width: 800px;
}
</style>
<body>

<div id="app">
	<a-divider class="a-divi" orientation="left">基本</a-divider><!-- =============================================================== -->
	<p class="desc">基本滑动条。当 range 为 true 时，渲染为双滑块。当 disabled 为 true 时，滑块处于不可用状态。</p>
	<a-space direction="vertical" style="width: 800px">
		<a-slider v-model:value="value1_1" :disabled="disabled1"></a-slider>
		<a-slider v-model:value="value1_2" range :disabled="disabled1"></a-slider>
		Disabled: <a-switch v-model:checked="disabled1" size="small"></a-switch>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">带 icon 的滑块</a-divider><!-- =============================================================== -->
	<p class="desc">滑块左右可以设置图标来表达业务含义。</p>
	<div class="icon-slider-icon">
		<frown-outlined class="ant-icon" :style="{ color: preColor }"></frown-outlined>
		<a-slider class="my-slider" v-model:value="value2_1" :min="min2" :max="max2"></a-slider>
		<smile-outlined class="ant-icon" :style="{ color: nextColor }"></smile-outlined>
	</div>
	
	<a-divider class="a-divi" orientation="left">事件</a-divider><!-- =============================================================== -->
	<p class="desc">当 Slider 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入。在 onmouseup 时，会触发 onAfterChange 事件，并把当前值作为参数传入。</p>
	<a-space direction="vertical" style="width: 800px">
		<a-slider v-model:value="value3_1" @change="onChange3" @after-Change="onAfterChange3"></a-slider>
		<a-slider v-model:value="value3_2" range :step="10" @change="onChange3" @after-Change="onAfterChange3"></a-slider>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">垂直</a-divider><!-- =============================================================== -->
	<p class="desc">垂直方向的 Slider。【第四个展示了使用mark插槽来自定义刻度标记】</p><br>
	<a-space style="height: 300px">
		<a-slider v-model:value="value4_1" vertical style="height: 300px"></a-slider>
		<a-slider v-model:value="value4_2" vertical style="height: 300px" range :step="10"></a-slider>
		<a-slider v-model:value="value4_3" vertical style="height: 300px" range :marks="marks4_1"></a-slider>
		<a-slider v-model:value="value4_3" vertical style="height: 300px" range :marks="marks4_2">
			<template #mark="{ label, point }">
				<template v-if="point === 100">
					<strong>{{ label }}</strong>
				</template>
				<template v-else>{{ label }}</template>
			</template>
		</a-slider>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">反向</a-divider><!-- =============================================================== -->
	<p class="desc">设置 reverse 可以将滑动条置反。</p>
	<a-space direction="vertical" style="width: 800px">
		<a-slider v-model:value="value5_1" :reverse="reverse5"></a-slider>
		<a-slider v-model:value="value5_2" range :reverse="reverse5"></a-slider>
		Reversed: <a-switch v-model:checked="reverse5" size="small"></a-switch>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">带输入框的滑块</a-divider><!-- =============================================================== -->
	<p class="desc">和 数字输入框 组件保持同步。</p>
	<a-space>
		<a-slider v-model:value="value6_1" :min="1" :max="20" style="width: 500px"></a-slider>
		<a-input-number v-model:value="value6_1" :min="1" :max="20"></a-input-number>
	</a-space>
	<a-space>
		<a-slider v-model:value="value6_2" :min="0" :max="1" :step="0.01" style="width: 500px"></a-slider>
		<a-input-number v-model:value="value6_2" :min="0" :max="1" :step="0.01"></a-input-number>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">自定义提示</a-divider><!-- =============================================================== -->
	<p class="desc">使用 tipFormatter 可以格式化 Tooltip 的内容，设置 tipFormatter={null}，则隐藏 Tooltip。</p>
	<a-space direction="vertical" style="width: 800px">
		<a-slider v-model:value="value7_1" :tip-formatter="formatter7"></a-slider>
		<a-slider v-model:value="value7_2" :tip-formatter="null" range></a-slider>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">带标签的滑块</a-divider><!-- =============================================================== -->
	<p class="desc">使用 marks 属性标注分段式滑块，使用 value 指定滑块位置。</p>
	<p class="desc">当 included=false 时，表明不同标记间为并列关系。</p>
	<p class="desc">当 step=null 时，Slider 的可选值仅有 marks 标出来的部分。</p>
	<div id="demo8">
		<h4>included=true</h4>
		<a-slider v-model:value="value8_1" :marks="marks4_1"></a-slider>
		<a-slider v-model:value="value8_2" :marks="marks4_1" range></a-slider>
	
		<h4>included=false</h4>
		<a-slider v-model:value="value8_1" :marks="marks4_1" :included="false"></a-slider>
		<a-slider v-model:value="value8_2" :marks="marks4_1" :included="false" range></a-slider>
	
		<h4>:step="10"</h4>
		<a-slider v-model:value="value8_4" :marks="marks4_1" :step="10"></a-slider>
	
		<h4>:step="null"</h4>
		<a-slider v-model:value="value8_5" :marks="marks4_1" :step="null"></a-slider>
	</div>
	
	<a-divider class="a-divi" orientation="left">控制 ToolTip 的显示</a-divider><!-- =============================================================== -->
	<p class="desc">当 tooltipOpen 为 true 时，将始终显示 ToolTip；反之则始终不显示，即使在拖动、移入时也是如此。</p>
	<a-space direction="vertical" style="width: 800px">
		<a-slider v-model:value="value9_1" :tooltip-open="true"></a-slider>
		<a-slider v-model:value="value9_2" :tooltip-open="false"></a-slider>
	</a-space>
	
	
	
</div>
<div class="h100"></div>

</body>
<script>
const Main = {
data() {
	return {
		value1_1: 8,
		value1_2: [20, 50],
		disabled1: false,
		
		value2_1: 0,
		min2: 0,
		max2: 10,
		
		value3_1: 8,
		value3_2: [20, 50],
		
		value4_1: 30,
		value4_2: [30, 50],
		value4_3: [26, 37],
		marks4_1: {
			0: '0°C',
			26: '26°C',
			37: '37°C',
			100: {
				style: {color: '#f50',},
				label: Vue.createVNode('strong', {}, '100°C'),
			},
		},
		marks4_2: {
			0: '0°C',
			26: '26°C',
			37: '37°C',
			100: {
				style: {color: '#f50',},
				label: '100°C',
			},
		},
		
		value5_1: 8,
		value5_2: [20, 50],
		reverse5: true,
		
		value6_1: 5,
		value6_2: 0.23,
		
		value7_1: 8,
		value7_2: [20, 50],
		
		value8_1: 37,
		value8_2: [26, 37],
		value8_3: 37,
		value8_4: 37,
		value8_5: 37,
		
		value9_1: 97,
		value9_2: 77,
	}
},
computed:{
	preColor(){
		let mid = (this.max2 - this.min2) / 2;
		return this.value2_1 < mid ? 'rgba(255, 0, 0, 1)' : 'rgba(0, 0, 0, 0.45)';
	},
	nextColor(){
		let mid = (this.max2 - this.min2) / 2;
		return this.value2_1 > mid ? 'rgba(0, 255, 0, 1)' : 'rgba(0, 0, 0, 0.45)';
	},
	
	
	
},
methods:{
	onChange3(value){
		console.log('onChange3: ', value);
	},
	onAfterChange3(value){
		console.log('onAfterChange3: ', value);
	},
	
	formatter7(value){
		return value + '分';
	},
	
	
},
}

const app = Vue.createApp(Main);
for (const [key, component] of Object.entries(AntdIconsVue)) {app.component(key, component)};
app.use(antd);
let vm = app.mount("#app");


</script>
</html>
